<template>
  <div class="etc_card">
     <header>
       <p @click='home'><img src="../assets/img/left@2x.png" ></p>
       <p>{{title}}</p>
       <p></p>
     </header>
     <div v-show="showError" id="tishi">您输入的卡号有误，请重新输入</div>
     <form>
       <div class="txt_nub">
         <span>ETC卡号</span>
         <span><input type="text" placeholder="请输入37开头的20位卡号" v-model = 'input.value'></span>
       </div>
       <div class="btn" :class = "{submit:(input.value !== '')}" @click='submits'><input type="button" value="下一步"></div>
     </form>
  </div>
</template>

<script>
export default {
  name: 'etc_card',
  data () {
    return {
      active: 'etc_card',
      title: '我的ETC卡号',
      showError: false,
      input:{
        value:''
      }
    }
  },
  methods:{
    home:function(){
        this.$router.go(-1)
    },
    submits:function(){
      const str = this.input.value
      const  reg = /^(37)\d{18}$/
      const isYes = str.replace(reg,'yes')
      if(isYes == 'yes'){
          this.$router.push('/etc_details')
      }else{
          this.showError = true
      }
    }
  },
  watch: {
    'input.value': function (curVal) {
      // this.showError = !(/^(37)\d{18}$/.test(curVal))
      if(curVal.length==0){
        this.showError = false
      }
    }
  }
}

         
    

  // watch:{
  //   value:functioin(new,old){

  //   if(this.value == ''){
  //       document.getElementById('tishi').style.display = 'none'
  //   }
  //   }
  // }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.etc_card{
  height: 100%;
  /* background: #f2f2f2; */
  .font(26,#797979);
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  }
  #tishi {
    text-align: center;
    .font(32,#f96203);
    .line-height(66);
    background: #e6e5e5;
    position: absolute;
    .px2rem(top,88);
    .px2rem(left,0);
    width: 100%;
    .px2rem(height,64);
  }
  form {
    .px2rem(margin-top,88);
    .txt_nub {
      width: 92%;
      margin: auto;
      .px2rem(height,74);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .margin-top(40);
      span {
        flex: 1;
        /* height: 100%; */
        display: block;
        &:nth-child(1){
          .font(30,#333);
        }
        &:nth-child(2){
          height: 100%;
          display: flex;
          flex: 4;
          align-items: center;
          .border(1,solid,#d8d8d8);
          input {
            .padding-left(30);
            border: none;
          }
        }
      }
    }
    .btn {
      width: 92%;
      margin: auto;
      .margin-top(104);
      input {
        width: 100%;
        text-align: center;
        .px2rem(height,78);
        .font(32,#fff);
        /* background: #4aba80; */
        background: #ccc;
        border: none;

      }
    }
    .submit {
      width: 92%;
      margin: auto;
      .margin-top(104);
      input {
        width: 100%;
        text-align: center;
        .px2rem(height,78);
        .font(32,#fff);
        /* background: #4aba80; */
        background: #4aba80;
        border: none;

      }
    }
  }
}
</style>
